<template>
  <div class="hom">
    <div class="banner">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img :src="image" alt />
        </van-swipe-item>
      </van-swipe>
    </div>
    <ul class="nav">
      <router-link to="./ke" tag="li">
        <img src="../assets/images/index-kinds-course.png" alt />
        <p>特色课</p>
      </router-link>
      <li>
        <img src="../assets/images/index-kinds-one.png" alt />
        <p>一对一辅导</p>
      </li>
      <li>
        <img src="../assets/images/index-kinds-study.png" alt />
        <p>学习日历</p>
      </li>
    </ul>
    <div class="recommend">
      <h5>{{recommendTitle}}</h5>
      <ul>
          <li v-for="(item,key) in recommend" :key="key" @click="Info(item.id)">
            <div>
              <p class="tit">{{item.title}}</p>
              <p>{{item.start_play_date | formatDate}} ~ {{item.end_play_date | formatDate}}共{{item.total_periods}}课时</p>
              <p class="p1" v-for="(i,k) in item.teachers_list" v-show="k<3">
                <img :src="i.teacher_avatar" alt />
                <span>{{i.teacher_name}}</span>
              </p>
            </div>
            <p>
              <span v-if="item.course_type != 4">共有{{item.sales_num}}人报名</span>
              <span v-else>共有{{item.brows_num}}人报名</span>
              <span class="sp" v-if="item.price">
                <img class="price-ico" src="../assets/images/pay-other.png" />
                {{item.price}}
              </span>
              <span class="spa" v-else>免费</span>
            </p>
          </li>
        </ul>
    </div>
    <div class="member">
      <h5>{{memberTitle}}</h5>
      <ul>
          <li v-for="(item,key) in member" :key="key" @click="Info(item.id)">
            <div>
              <p class="tit">{{item.title}}</p>
              <p>{{item.start_play_date | formatDate}} ~ {{item.end_play_date | formatDate}}共{{item.total_periods}}课时</p>
              <p class="p1" v-for="(i,k) in item.teachers_list" v-show="k<3">
                <img :src="i.teacher_avatar" alt />
                <span>{{i.teacher_name}}</span>
              </p>
            </div>
            <p>
              <span v-if="item.course_type != 4">共有{{item.sales_num}}人报名</span>
              <span v-else>共有{{item.brows_num}}人报名</span>
              <span class="sp" v-if="item.price">
                <img class="price-ico" src="../assets/images/pay-other.png" />
                {{item.price}}
              </span>
              <span class="spa" v-else>免费</span>
            </p>
          </li>
        </ul>
    </div>
    <div class="lecturer">
      <h5>{{lecturerTitle}}</h5>
      <ul>
        <li v-for="(item,key) in lecturer" :key="key">
          <div class="left">
            <img :src="item.teacher_avatar" alt="">
          </div>
          <div class="right">
            <p>{{item.teacher_name}}</p>
            <p class="introduction">{{item.introduction}}</p>
          </div>
        </li>
      </ul>
    </div>
    <div class="appoint">
      <h5>{{appointTitle}}</h5>
      <ul>
        <li v-for="(item,key) in appoint" :key="key">
          <div class="left">
            <img :src="item.teacher_avatar" alt="">
          </div>
          <div class="right">
            <p>{{item.teacher_name}}</p>
            <p class="introduction">{{item.introduction}}  {{item.level_name}}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { List } from "../request/api.js";
import { Lazyload } from "vant";
import { Swipe, SwipeItem } from "vant";
export default {
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Lazyload.name]: Lazyload
  },
  data() {
    return {
      images: [
        "https://msmk2019.oss-cn-shanghai.aliyuncs.com/uploads/image/2019MGNW3BtiS91569839576.jpg",
        "https://msmk2019.oss-cn-shanghai.aliyuncs.com/uploads/image/2019LnKumseuhw1569839569.jpg",
        "https://msmk2019.oss-cn-shanghai.aliyuncs.com/uploads/image/20193KAjU2cB6h1569839562.jpg",
        "https://msmk2019.oss-cn-shanghai.aliyuncs.com/uploads/image/20197Cxc53hktC1569839552.jpg"
      ],
      recommend: [],
      recommendTitle: "",
      memberTitle: "",
      member: [],
      lecturer: [],
      lecturerTitle: "",
      appoint:[],
      appointTitle:""
    };
  },
  methods: {
    add() {
      List().then(res => {
        console.log(res);
        this.recommend = res.data[0].list;
        this.recommendTitle = res.data[0].channel_info.name;
        this.member = res.data[1].list;
        this.memberTitle = res.data[1].channel_info.name;
        this.lecturerTitle = res.data[2].channel_info.name;
        this.lecturer = res.data[2].list;
        this.appoint=res.data[3].list;
        this.appointTitle=res.data[3].channel_info.name;
        console.log(this.lecturer);
      });
    },
    Info(id){
      console.log(id)
      this.$router.push({path:"/part",query:{id:id}})
    },
  },
  mounted() {
    this.add();
  },
  filters: {
      formatDate: function(value) {
        let date = new Date(value*1000);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? "0" + MM : MM;
        let d = date.getDate();
        d = d < 10 ? "0" + d : d;
        let a=""
        let h = date.getHours();
        h = h < 10 ? "0" + h : h;
        let m = date.getMinutes();
        m = m < 10 ? "0" + m : m;
        let s = date.getSeconds();
        s = s < 10 ? "0" + s : s;
        return MM + "月" + d + "日" + h + ":" + m ;
      }
  },
};
</script>

<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}
.banner {
  width: 100%;
  height: 200px;
  .van-swipe {
    width: 100%;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.nav {
  width: 100%;
  height: 100px;
  display: flex;
  position: absolute;
  top: 170px;
  text-align: center;
  li {
    width: 26%;
    height: 100%;
    background: white;
    margin: 0 auto;
    border-radius: 10px;
    position: relative;
    img {
      width: 20px;
      height: 20px;
      margin: 20px auto;
    }
    p {
      width: 100%;
      font-size: 13px;
      text-align: center;
      color: #909090;
      position: absolute;
      top: 40px;
    }
  }
}
.recommend {
  width: 100%;
  margin-top: 80px;
  margin-bottom: 30px;
  h5 {
    font-size: 18px;
    margin-top: 20px;
    margin-left: 10px;
  }
  ul {
    list-style: none;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    li {
      width: 96%;
      height: 150px;
      background: white;
      display: block;
      margin: 0 auto;
      margin-top: 15px;
      border-radius: 5px;
      text-align: left;
      div {
        width: 100%;
        height: 70%;
        border-bottom: 1px solid rgb(165, 163, 163);
        line-height: 30px;
        margin-left: 5px;
        .tit {
          font-size: 13px;
        }
        .p1 {
          display: inline;
        }
        p > img {
          width: 15px;
          height: 15px;
          border-radius: 50px;
          margin-left: 15px;
        }
      }
      p {
        font-size: 13px;
        .spa {
          color: green;
          float: right;
          margin-top: 5px;
        }
        .sp {
          float: right;
          margin-top: 5px;
          .price-ico {
            width: 10px;
            height: 10px;
          }
        }
      }
    }
  }
}
.member {
  width: 100%;
  margin-bottom: 30px;
  h5 {
    font-size: 18px;
    margin-top: 20px;
    margin-left: 10px;
  }
  ul {
    list-style: none;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    li {
      width: 96%;
      height: 150px;
      background: white;
      display: block;
      margin: 0 auto;
      margin-top: 15px;
      border-radius: 5px;
      text-align: left;
      div {
        width: 100%;
        height: 70%;
        border-bottom: 1px solid rgb(165, 163, 163);
        line-height: 30px;
        margin-left: 5px;
        .tit {
          font-size: 13px;
        }
        .p1 {
          display: inline;
        }
        p > img {
          width: 15px;
          height: 15px;
          border-radius: 50px;
          margin-left: 15px;
        }
      }
      p {
        font-size: 13px;
        .spa {
          color: green;
          float: right;
          margin-top: 5px;
        }
        .sp {
          float: right;
          margin-top: 5px;
          .price-ico {
            width: 10px;
            height: 10px;
          }
        }
      }
    }
  }
}
.lecturer {
  width: 100%;
  h5 {
    font-size: 18px;
    width: 100%;
    height: 20px;
    margin-left: 10px;
  }
  ul {
    list-style: none;
    width: 100%;
    li {
      width: 96%;
      height: 75px;
      background: white;
      margin: 0 auto;
      margin-top: 15px;
      border-radius: 5px;
      flex-wrap: nowrap;
      display: flex;
      .left{
        width: 20%;
        height: 100%;
        padding-top:15px; 
        img{
          width: 45px;
          height: 45px;
          margin: auto auto;
          display: block;
          border-radius: 50px;
        }
      }
      .right{
        width: 80%;
        height: 100%;
        padding-top:15px;
        p{
          font-size: 20px;
        } 
        .introduction{
          font-size: 13px;
        }
      }
    }
  }
}
.appoint{
  width: 100%;
  h5 {
    font-size: 18px;
    width: 100%;
    height: 20px;
    margin-left: 10px;
  }
  ul {
    list-style: none;
    width: 100%;
    li {
      width: 96%;
      height: 75px;
      background: white;
      margin: 0 auto;
      margin-top: 15px;
      border-radius: 5px;
      flex-wrap: nowrap;
      display: flex;
      .left{
        width: 20%;
        height: 100%;
        padding-top:15px; 
        img{
          width: 45px;
          height: 45px;
          margin: auto auto;
          display: block;
          border-radius: 50px;
        }
      }
      .right{
        width: 80%;
        height: 100%;
        padding-top:15px;
        p{
          font-size: 20px;
        } 
        .introduction{
          font-size: 13px;
        }
      }
    }
  }
}
</style>